<!--  -->
<template>
  <div id="customer" 
    @dragover.prevent="handleDragOver"
    @drop.prevent="handleDrop">
    <div class="customer-info" v-if="userInfo">
      <div class="customer-user-box">
        <div class="customer-user flex">
          <div class="customer-user-img" >
            <img :src="userInfo.avatar" />
          </div>
          <div class="customer-user-right" >
            <div class="realse-name flex-a-c">
              <div class="user-right-name" v-if="userInfo.nickname">{{ userInfo.nickname }}</div>
            </div>
            <div class="flex" >
              <div class="user-level-name" v-if="userInfo.level_name">
                <img style="width: .7188rem;margin-right: .0625rem;" :src="require('../../../assets/images/wechat_sidebar/member_level.png')" alt="">{{ userInfo.level_name }}
              </div>
              <div class="user-right-id" v-if="userInfo.uid">ID:{{ userInfo.uid }}</div>
            </div>
          </div>
          
        </div>
        <div class="customer-phone flex-a-c flex-j-sb" v-if="userInfo.mobile">
          <div class="wrap flex-a-c">
            <div class="icon-service_m_box">
              <i class="iconfont icon-service_m"></i>
            </div>
            <h5 style="font-size: .9375rem;font-weight: 500;">{{ userInfo.mobile }}</h5>
            <span  v-clipboard:copy="userInfo.mobile " v-clipboard:success="onCopy"  class="copy">复制</span>
          </div>
          <div class="phone-btn" @click="callPhone(userInfo.mobile)">拨打电话</div>
        </div>
      </div>
    </div>
    <customer-label 
      :tags="userInfo.tag" 
      class="customer-tags" 
      :labeLMore="labeLMore" 
      :labeLClass="labeLClass"
      :labelShow.sync="labelShow"></customer-label>
    <div class="customer-tab">
      <van-tabs 
        v-model="active" 
        :title-active-color="'var(--themeBaseColor)' || '#FE5E56'" 
        title-inactive-color="#00001C" 
        :color="'var(--themeBaseColor)' || '#FE5E56'"
        line-width="15px" 
        @click="activeOn">
        <van-tab title="客户动态" :name="0">
          <div class="chown" >
            <div class="their"><span>所属成员：</span>{{member_name || '无'}}</div>
            <div style="display: flex; align-items: center;">
            <template v-if="member_name && has_owned">
              <van-button 
                @click="handle_member('assignment')" 
                color="var(--themeBaseColor)" 
                class="buttons mr8"
                plain
                round 
                size="normal">转让</van-button>
              <van-button 
                color="var(--themeBaseColor)" 
                class="buttons mr8" 
                @click="handle_member('share')"
                plain
                round  
                size="normal">
                共享
              </van-button>
              <van-button 
                color="var(--themeBaseColor)"  
                @click="handle_member('waive')" 
                class="buttons waive"
                plain
                round  
                size="normal">
                放弃
              </van-button>
            </template>
            <template v-if="!member_name && recover_day == -2">
              <div style="display: flex; align-items: center;">
                <van-button color="var(--themeBaseColor)"  @click="handle_member('receive')" class="buttons  mr8" plain round  size="normal">领取</van-button>
                <van-button color="var(--themeBaseColor)"  @click="handle_member('allot')" class="buttons " plain round  size="normal">分配</van-button>
              </div>
            </template>
            </div>
          </div>
          <div class="client-area">
            <div class="area-head flex-a-c flex-j-sb">
              <h3>跟进记录</h3>
              <van-button round color="var(--themeBaseColor)" class="client-add" type="primary" @click="clientAdd">发表</van-button>
            </div>
            <el-input type="textarea" :rows="5"
              class="client-input" 
              placeholder="添加跟进记录，1000字以内" 
              v-model="form.content" maxlength="1000" show-word-limit></el-input>
            <div class="area-footer  flex-j-sb">
              <div class="area-left">
                <van-uploader :after-read="multipleMethod" accept="*" v-model="fileList" multiple :max-count="9" @delete="fileDelete">
                  <div  style="display: flex; flex-direction: column; align-items: center; cursor: pointer;">
                    <div class="area-accept" style="color:var(--themeBaseColor)"><span style="color:var(--themeBaseColor);margin-left: 0;"><span style="font-size: 1.125rem;line-height: 1;color:var(--themeBaseColor)">+</span>上传附件</span> ({{ fileList.length }}/9)</div>
                  </div>
                </van-uploader>
              </div>
            </div>
          </div>

          <div class="record">
            <div class="record-tabs" id="record-tabs">
              <van-tabs 
                v-model="recordActive" 
                :title-active-color="'var(--themeBaseColor)' || '#FE5E56'" 
                title-inactive-color="#00001C" 
                :color="'var(--themeBaseColor)' || '#FE5E56'"
                line-width="15px" 
                @click="onClientChange">
                <block v-for="(item, index) in recordList" :key="index">
                  <van-tab :title="item.text" :name="item.value" >
                    <el-form ref="form" class="record-from" :model="item"  :inline="true"  @submit.native.prevent>
                      <el-form-item label="" v-if="item.value!==6">
                        <el-input v-model="item.name" :style="item.value==1?'width:136px;':'width:17.8125rem'" :placeholder="item.placeName"></el-input>
                      </el-form-item>
                      <el-form-item label=""  v-if="item.value==1">
                        <el-input v-model="item.title" style="width:136px;" :placeholder="item.placeTitle"></el-input>
                      </el-form-item>
                      <div  style="display: inline-block;flex-shrink: 0;" class="search-btn-box">
                        <el-form-item label="" style="margin:0;padding-bottom: 10px;" v-if="item.value!==6">
                          <van-button  type="primary" color="var(--themeBaseColor)" class="record-search" round @click.stop="search_record">搜索</van-button>
                        </el-form-item>
                      </div>
                   
                    </el-form>
                    <div @click.stop="custTimer = true"  class="record-timer" > 
                      <el-input v-model="item.time"  :placeholder="item.placeTime" style="width:100%;cursor: pointer;" readonly>
                        <span slot="prefix"  class="iconfont icon-riqi" style="color:#00001C;"></span>
                        <span slot="suffix"  class="iconfont icon-icon_down1" style="color:#00001C;"></span>
                      </el-input>
                    </div>
                    <record-data 
                      v-if="Object.values(customerList).length > 0" 
                      :list="customerList"
                      :tabIndex="item.value"
                      @lookImg="lookImg"
                      @clientDel="clientDel"
                      @clientUpdate="clientUpdate"
                      @clientDown="clientDown">
                    </record-data>
                    <browse-list :browselists="browselists" v-else-if="browselists.length > 0&&item.value==5"></browse-list>
                    <div v-else class="flex-column" style="align-items: center;background-color: #fff;border-radius: .5rem;padding: 2.5938rem 0 3.75rem;margin-top: .625rem;">
                      <div class="empty-class">
                        <img :src="require('../../../assets/images/wechat_sidebar/2278.png')" alt="">
                      </div>
                      <div style="color:#6E6E79;font-size: .8125rem;">暂无{{item.text}}</div>
                    </div>
                  </van-tab>
                </block>
              </van-tabs>
            </div>
            <!--电话号码 <span>15536254456</span>-->
          </div>
        </van-tab>
        <van-tab title="客户商机" :name="3">
            <div  class="business-box">
              <span class="span" @click="show_picker('status')">{{business_status_name||'商机状态'}}<van-icon name="arrow-down" /></span>
              <span class="span" @click="show_picker('type')">{{business_type_name||'商机类型'}}<van-icon name="arrow-down" /></span>
 
            </div>
            <div class="business-box2">
              <input type="text" v-model="business_form.staff" placeholder="创建人"/>
              <input type="text" v-model="business_form.name" placeholder="商机名称">
              <div style="display: flex; align-items: center; flex-wrap: nowrap; flex-shrink: 0;">
                <button class="search-button" @click="search_handle">搜索</button>
              </div>
            </div>
            <div style="padding-bottom: 6.25rem;">
              <div  class="business-wrapper">
                <div class="business-count">商机数量（{{business_list.length}}）</div>
                <div class="business-add" @click="add_business"><i class="iconfont icon-life-game-plus"></i>新建商机</div>
              </div>
              <div class="business-box3">
                <div class="business-item" v-for="item in business_list" :key="item.id">
                  <el-steps  :active="business_columns_status.findIndex(child=>child==(item.has_one_status&&item.has_one_status.name))" align-center >
                    <el-step  v-for="(c_item,index) in business_columns_status" :title="c_item" :key="index" >
                      <template slot="icon">
                        <div class="step-round"></div>
                      </template>
                    </el-step>
                  </el-steps>
                  <div  class=" business-status">
                    <div ><span class="business-left">商机名称</span><span class="business-right">{{item.name}}</span></div>
                    <div ><span class="business-left">商机状态</span><span class="business-right">{{item&&item.has_one_status&&item.has_one_status.name}}</span></div>
                    <div ><span class="business-left">商机类型</span><span class="business-right">{{item&&item.has_one_type&&item.has_one_type.name}}</span></div>
                  </div>
                  <div  class="flex-j-sb" >
                    <div class="business-item-bottom">
                      <span style="flex: 1;">{{item.created_at}}</span>
                      <span class="staff-name">{{item&&item.has_one_staff&&item.has_one_staff.name}}</span>
                    </div>
                    <div class="business-item-details" @click="show_detais(item)">查看详情</div>
                  </div>
                </div>
              </div>
            </div>
            
            <van-popup  v-model="show_details_page" round position="bottom" :style="{ height: '70%' ,backgroundColor:'#F5F5F5'}" >
              <div class="business-popup">
                <div class="business-popup-top">
                  <span class="tips">{{opportunity_id?'编辑商机':'新建商机'}}</span>
                  <div class="label-circle flex-a-c flex-j-c">
                    <span class="iconfont icon-guanbi" @click="go_back"></span>
                  </div>
                </div>
                <div class="add-business">
                  <div class="flex center" style="margin: 0.8125rem 0;" v-if="opportunity_id">
                    <span style="margin-right: 1rem;" class="left-span">创建人：</span>
                    <span>{{ create_name }}</span>
                  </div>
                  <div class="flex center">
                    <span class="mr-24 left-span">商机名称</span>
                    <input style="flex:1;" type="text" placeholder="请输入" v-model="business_form.name">
                  </div>
                  <div class="flex center" style="margin: 0.8125rem 0;">
                    <span class="mr-24 left-span">商机状态</span>
                    <div class="relative flex-j-sb popup-input-box"  @click="show_picker('status')">
                      <span v-if="business_status_name">{{ business_status_name}}</span>
                      <input v-else type="text" disabled :placeholder="business_status_name||'请选择商机状态'" >
                      <van-icon name="arrow" />
                    </div>
                  </div>
                  <div class="flex center">
                    <span class="mr-24 left-span">商机类型</span>
                    <div class="relative flex-j-sb popup-input-box"  @click="show_picker('type')">
                      <span v-if="business_type_name">{{ business_type_name }}</span>
                      <input v-else type="text" disabled  :placeholder="business_type_name||'请选择商机类型'" >
                      <van-icon name="arrow" />
                    </div>
                  </div>
                  <div class="business-details" style="border-bottom: none;">
                    <span class="mr-24 left-span">商机详情</span>
                    <textarea style="padding-left: 0.6875rem" v-model="business_form.details" placeholder="请输入" rows="3"></textarea>
                  </div>
                
                </div>
                <div class="details" >
                  <div class="details-top">
                      <span>附件</span>
                      <div style="margin-left: 3.75rem;">
                        <van-uploader :after-read="multipleMethod" accept="*"  v-if="files_list.length<9">
                          <div  style="display: flex; flex-direction: column; align-items: center; cursor: pointer;">
                            <span class="area-accept" ><span><span style="font-size: 1.25rem;line-height: 1;">+</span>上传附件</span> ({{ files_list.length }}/9)</span>
                          </div>
                        </van-uploader>
                      </div>
                  </div>
                      <div  class="details-files-box"  v-if="files_list && files_list.length!==0">
                        <div v-for="(item,index) in files_list" :key="item.id" class="details-files-box-item" >
                            <div style="display: flex;align-items: center;">
                                <div>
                                  <img :src="require('../../../assets/images/wechat_sidebar/DOC_DOCX.png')" v-if="['doc', 'docx'].includes(item.type)" />
                                  <img :src="require('../../../assets/images/wechat_sidebar/XLS_XLSX.png')" v-else-if="['xls', 'xlsx'].includes(item.type)"  />
                                  <img :src="require('../../../assets/images/wechat_sidebar/JPG_JPEG_PNG_GIF.png')" v-else-if="['jpg','png','jpeg','image'].includes(item.type)" @click.stop="lookImg(imgItem.url)"   />
                                  <img :src="require('../../../assets/images/wechat_sidebar/MP4_AVI_MOV_MWV.png')" v-else-if="['mp4', 'avi', 'mov', 'rmvb', 'rm', 'flv', '3gp'].includes(item.type)" />
                                  <img :src="require('../../../assets/images/wechat_sidebar/MP3_WAV_AAC.png')" v-else-if="['cda', 'wav', 'mp3', 'wmv', 'flac', 'aac'].includes(item.type)" />
                                  <img :src="require('../../../assets/images/wechat_sidebar/ZIP_RAR.png')" v-else-if="['zip','rar'].includes(item.type)" />
                                  <img :src="require('../../../assets/images/wechat_sidebar/PDF.png')" v-else-if="['pdf'].includes(item.type)" />
                                  <img :src="require('../../../assets/images/wechat_sidebar/TXT.png')" v-else-if="['txt','text'].includes(item.type)" />
                                </div>
                                <div>
                                <div class="file-name" style="width:5rem; white-space: pre-wrap;word-wrap: break-word;font-size: .875rem;">{{ item.file_name }}</div>
                                <div style="color:#AAAAB3;font-size: .8125rem;" v-if="item.file_size">{{ ((item.file_size*1)/1024).toFixed(2) }}M</div>
                                </div>
                            </div>
                            <div style="flex-shrink: 0; margin-left: 1.25rem;display: flex;align-items: center;">
                              <div class="details-files-box-btn" style="margin-right: .6875rem;" @click.stop="lookImg(item.file_url)" v-if="item.type=='image'||item.type === 'jpg' || item.type === 'png' || item.type === 'jpeg'">预览</div>
                              <div class="details-files-box-btn" @click="clientDelete(item.id, item, index,'business')">删除</div>
                              <div class="details-files-box-btn" style="margin-left: .6875rem;"  @click.stop="clientDownload(item, index,'business')">下载</div>
                            </div>
                        </div>
                      </div>
                </div>
                <div style="height: 6.25rem;"></div>
                <div class="business-popup-buttons">
                  <span @click="go_back"  >返回</span>
                  <span @click="submit_handle" >保存</span>
                </div>
              </div>
            </van-popup>
  
        </van-tab>
        <van-tab title="客户关系" :name="2">
          <div class="other-member">其他归属成员</div>
          <div class="other-member-box" v-for="item in otherMemberList" :key="item.uid">
            <img :src="item.has_one_employee&&item.has_one_employee.avatar" alt=""/>
            <div class="other-member-right">
              <div class="text-left">{{item.has_one_employee&&item.has_one_employee.name}}</div>
              <div class="text-left">{{item.has_one_employee&&item.has_one_employee.mobile}}</div>
            </div>
          </div>
          <div class="other-member">客户群</div>
          <div class="group-box">
              <div class="group-box-item" v-for="(item,index) in customer_base" :key="index">
                  <div class="flex-between">
                    <span>{{item.group_name}}（{{item.group_member_count}}人）</span>
                    <span>群主：{{item.has_one_owner.name}}</span>
                  </div>
                  <div class="flex-between mt10">
                    <div class="flex-column">
                      <span>创建时间：{{item.created_at}}</span>
                      <span>加入时间：{{item.group_one_member[0].created_at}}</span>
                    </div>
                    <span class="into" @click="into_group_chat(item.chat_id)">进入群聊</span>
                  </div>
              </div>
          </div>
        </van-tab>
        <van-tab title="客户详情" :name="1">
          <div class="client-details">
            <div class="flex-a-c client-name">
              <span><span class="iconfont icon-fontclass-xinghao"></span>客户名称</span>
              <van-field v-model="clientForm.name" placeholder="请输入客户名称" input-align="right" @input="clientChange" />
            </div>
            <div class="flex-a-c client-name">
              <span><span class="iconfont icon-fontclass-xinghao"></span>客户电话</span>
              <van-field v-model="clientForm.mobile" placeholder="请输入客户电话" input-align="right" @input="clientChange" />
            </div>
            <van-cell title="客户进展" is-link :value="clientShow.progress_name || '请选择客户进展'" :border="true" @click.stop="showEvolve = true" />
            <van-cell title="客户来源" is-link :value="clientShow.source_name || '请选择客户来源'" :border="true" @click.stop="showSource = true" />
            <van-cell title="客户行业" is-link :value="clientShow.industry_name || '请选择客户行业'" :border="true" @click.stop="showAccessory = true" />
            <van-cell title="所属部门" is-link :value="clientShow.classifyName || '请选择所属部门'" :border="true" @click.stop="departmentPopup" />
            <van-cell title="所属区域" is-link :value="clientShow.addressName || '请选择所在区域'" :border="true" @click.stop="addressShow = true" />
            <yd-cityselect v-model="addressShow" :callback="addressCallback" :items="district"></yd-cityselect>
            <div class="client-btn" @click.stop="saveCustomer">提交</div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    

    <maintain-popup :tainShow.sync="tainShow" :datas="datas" :names="names"></maintain-popup>
    <van-popup
      v-model="show_member"
      round
      :style="{ height: '60%' }"
      position="bottom"
    >
     <div class="show-member-popup">
        <i class="iconfont icon-guanbi" style="font-size: 0.75rem;position:absolute;top:1.0625rem;right:1.0938rem;" @click="show_member=false"></i>
        <div style="padding: 1.5rem 0 .75rem;font-size: .9375rem;font-weight: 400; text-align: center;">请选择成员</div>
        <van-search
          v-model="keywork"
          show-action
          shape="round"
          :clearable="false"
          placeholder="请输入成员姓名/手机号"
        >
          <template #right-icon v-if="keywork"  >
            <i class="iconfont icon-guanbi" style="font-size: 0.75rem;" @click="onCancle"></i>
          </template>
          <template #action>
            <div class="search-btn" @click="onSearch">搜索</div>
          </template>
        </van-search>
        <div style="padding: 1rem; overflow-y: scroll; height: calc(100% - 20%);"    ref="memberRef">
          <div @click="choose(item.id)" class="show-member-radio"  v-for="item in member_list" :key="item.id">
            <span>{{item.name}}</span>
            <i class="iconfont icon-icon_select1" v-if="staff_id == item.id"></i>
          </div>
        </div>
      </div>
    </van-popup>

    <van-popup v-model="labelShow" round  position="bottom" :style="{ height: '60%' }" @close="labelShow = false">
      <div class="label-popup">
        <div class="popup-head flex-a-c flex-j-sb">
          <h3>全部标签</h3>
          <div class="label-circle flex-a-c flex-j-c">
            <span class="iconfont icon-guanbi" @click.stop="labelShow = false"></span>
          </div>
          
        </div>
        <customer-label class="popup-customer-label" :tags="userInfo.tag" :labeLClass="labeLClass" :labeLMore="false"></customer-label>
      </div>
    </van-popup>
    <!--@close="accessoryClick"-->
    <van-popup v-model="accessoryShow" class="accessory-popup" position="center">
      <div class="accessory" :style="{ 'background-image': 'url(' + lookImgItem + ')' }"></div>
    </van-popup>

    <div class="accessory-down" v-if="accessoryShow" @click="accessoryClick">
      <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/poster-down.png" />
    </div>
    <!--修改跟进记录 -->
    <follow-popup :followUpShow="followUpShow" :followUpData="form.content" @cancelFollow="cancelFollow" @updateConfirm="updateConfirm"></follow-popup>

    <client-picker :showPopup="showSource" typeName="source_id" valuekey="source_name" :pickerList="sourceList" :index="sourceIndex" clientTitle="客户来源" @pickerCancel="cancelClick" @pickerConfirm="pickerConfirm">
    </client-picker>

    <client-picker
      :showPopup="showAccessory"
      typeName="industry_id"
      valuekey="industry_name"
      :pickerList="industryList"
      :index="industryIndex"
      clientTitle="客户行业"
      @pickerCancel="cancelClick"
      @pickerConfirm="pickerConfirm"
    >
    </client-picker>
    <client-picker
      :showPopup="showEvolve"
      typeName="progress_id"
      valuekey="progress_name"
      :index="progressIndex"
      :pickerList="progressList"
      clientTitle="客户进展"
      @pickerCancel="cancelClick"
      @pickerConfirm="pickerConfirm">
    </client-picker>
    <van-popup v-model="departmentShow" position="bottom" round>
      <div class="department-main">
        <div class="head flex-a-c flex-j-sb">
          <div class="cancel" @click.stop="divisionCancel">取消</div>
          <div class="department-title">请选择所属部门</div>
          <div class="affirm" @click.stop="divisionAffirm">确认</div>
        </div>

        <div class="content">
          <block v-for="(item, index) in departmentArr" :key="index" class="content-time-stair flex-a-c flex-j-sb">
            <div class="time-stair flex-a-c flex-j-sb" @click.stop="departmentArrOn(index, item)">
              <div class="time-left flex-a-c flex-j-sb">
                <div class="time-icon"></div>
                <p>{{ item.text }}</p>
              </div>
              <div class="iconfont icon-member-bottom"></div>
            </div>
          </block>

          <div class="content-time select flex-a-c flex-j-sb">
            <div class="time-left flex-a-c">
              <div class="time-icon"></div>
              <p>请选择部门</p>
            </div>
            <div class="iconfont icon-member-top"></div>
          </div>
        </div>

        <div class="department-children">
          <div class="department-title">选择所属子部门</div>
          <div class="children-main" v-if="divisionList.length > 0">
            <block v-for="(item, index) in divisionList" :key="index">
              <div class="children-item flex-j-sb" :class="divisionIndex === index ? 'on' : ''" @click.stop="departmentOn(item, index)">
                <div>{{ item.text }}</div>
                <div class="iconfont  icon-info-tick" v-if="divisionIndex === index"></div>
              </div>
            </block>
          </div>
          <van-empty description="暂无数据" v-else />
        </div>
      </div>
    </van-popup>
    <van-popup v-model="show_business_status" position="bottom" round>
      <van-picker
        show-toolbar
        :columns="business_columns_status"
        @change="onChangeStatus"
      >
      <div class="flex-j-sb flex-a-c" style="width: 100%;padding: 1.25rem .9375rem 0;">
        <span style="color: #AAAAB3;font-size: .9375rem;" @click="show_business_status = false">取消</span>
        <span style="color:#00001C;font-size: 1rem;">商机状态</span>
        <span style="color: #00001C;font-size: .9375rem;" @click="submit_confirm('status')">确认</span>
      </div>
    </van-picker>
    </van-popup>
    <van-popup v-model="show_business_type" position="bottom" round>
      <van-picker
        title="商机类型"
        show-toolbar
        :columns="business_columns_type"
        @change="onConfirmType"
      >
        <div class="flex-j-sb flex-a-c" style="width: 100%;padding: 1.25rem .9375rem 0;">
          <span style="color: #AAAAB3;font-size: .9375rem;" @click="show_business_type = false">取消</span>
          <span style="color:#00001C;font-size: 1rem;">{{ popup_title }}</span>
          <span style="color: #00001C;font-size: .9375rem;"  @click="submit_confirm('type')">确认</span>
        </div>
      </van-picker>
    </van-popup >
    <van-popup v-model="custTimer" @close="custTimer = false" position="bottom" round>
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="custTimerOn"
        @cancel="custTimer = false"
      />
    </van-popup>

    <loadingC :show="isLoading"></loadingC>
  </div>
</template>
<script>
import customer_controller from "../customerManagement/customer_controller";
export default customer_controller;
</script>
<style scoped lang="scss">
::v-deep .el-step__head.is-finish{
  color:var(--themeBaseColor) !important;
  border-color:var(--themeBaseColor) !important;
}
::v-deep .yd-cityselect-nav-active{
  color:var(--themeBaseColor) !important;
}
::v-deep .yd-cityselect-nav-active:after{
  background-color:var(--themeBaseColor) !important;
}
::v-deep .yd-cityselect-item-active{
  color:var(--themeBaseColor) !important;
}
.show-member-popup{
  .show-member-radio:last-child{
    border-bottom: 0;
  }
}
.show-member-radio{
  text-align: left; font-size: 1rem; margin-top: 0.5rem;
  margin-bottom: 1.125rem;
  padding-bottom: .7813rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ECECEC;
  .icon-icon_select1{
    color:var(--themeBaseColor)
  }
}
.show-member-popup ::v-deep .van-search .van-cell{
  background-color: #F6F6F6;
}
.business-item ::v-deep .el-step.is-horizontal .el-step__line{
  top:7px;
}
.search-btn-box ::v-deep .el-form-item__content{
  line-height: unset;
}
.popup-input-box{
  flex:1;
  color: #00001C;
  
  span{
    padding-left: 0.6875rem;
  }
}

.empty-class{
  width: 7.1875rem;
  height: 7.1875rem;
  // background: linear-gradient( 180deg, #ECECF0 0%, rgba(239,239,239,0) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  img{
    width: 100%;
  }
}
.business-popup{
  position: relative;
  min-height: 100%;
  .business-popup-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1;
    padding: 1.375rem .75rem  .75rem  1.125rem;
    .tips{
      font-weight: bold;
font-size: 1rem;
color: #00001C;
    }
  }
  .label-circle {
    background: #F0F0F1;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    .icon-guanbi {
      font-size: 10px;
    }
  }
  .business-popup-buttons{
    position: absolute;
    bottom:.9688rem;
    left: 1rem;
    right: 1rem;

    display: flex;
    align-items: center;
    justify-content: space-between;
    span:first-child{
      color:var(--themeBaseColor)
    }
    span:last-child{
      color:#fff;
      background-color: var(--themeBaseColor);
    }
    span{
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 400;
      font-size: .875rem;
      width: 10.3125rem;
      height: 2.5rem;
      border-radius: 1.1563rem 1.1563rem 1.1563rem 1.1563rem;
      border: .0313rem solid #015EF5;
    }
  }
}
.business-status{
  margin-bottom: .625rem;
  padding: 1.375rem 0 0;
  border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc; text-align: left;
   div{
    margin-bottom: 1.1563rem;
   }
   .business-left{
    font-weight: 400;
    font-size: .875rem;
    color: #6E6E79;
    margin-right: 1.3125rem;
   }
   .business-right{
    font-weight: 400;
font-size: .875rem;
color: #00001C;
   }
   
}
.staff-name{
  font-weight: 500;
  font-size: .875rem;
  color: #3B3B4A;
  margin-left: .625rem;
  padding-left: .625rem;
  position: relative;
  &::after{
    content:"";
    position: absolute;
    left: 0;
    top:50%;
    transform: translateY(-50%);
    width: 1px;
    height: .625rem;
    background: #AAAAB3;
  }
}
.business-item-bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  font-size: .9375rem;
  color: #00001C;
  }
.business-item-details{
  width: 5rem;
  height: 2rem;
  line-height: 2rem;
  background: #FFFFFF;
  border-radius: 1.1563rem 1.1563rem 1.1563rem 1.1563rem;
  border: .0313rem solid var(--themeBaseColor);
  color:var(--themeBaseColor);
  box-sizing: border-box;
}
.business-count{
  font-weight: 500;
  font-size: .9375rem;
  color: #00001C;
  line-height: 1;
}
.business-add{
  font-weight: 400;
  font-size: .875rem;
  color: var(--themeBaseColor);
  .icon-life-game-plus{
    font-weight: bold;
  }
}
.business-wrapper{
  display: flex;
  align-items: center;
  justify-content: space-between; 
  padding:.9375rem 0 0 .5rem;
  box-sizing: border-box;
}
.label-popup .popup-customer-label ::v-deep .tag-height{
  height: auto !important;
  overflow: unset;
}
.record-tabs ::v-deep .el-input__inner {
  color:#00001C;
  font-size: .8125rem;
  font-weight: 400;
}
.customer-tab ::v-deep .van-tabs__nav {
  background-color: transparent;
}
.record-tabs ::v-deep .van-tabs__nav {
  background-color: transparent;
}
.customer-tab ::v-deep .van-tab--active  {
  font-weight: bold;
  font-size: 15px;
  color: #015EF5;
}
.record-tabs  ::v-deep .van-tabs__line {
  font-weight: bold;
  font-size: 15px;
  color: #015EF5;
}

.customer-tab  ::v-deep .van-tabs__line , .record-tabs  ::v-deep .van-tabs__line  {
  bottom:1.3125rem;
}
.customer-tab ::v-deep .el-form-item .el-input__inner {
  border-radius: 25px;
  border:none;
}
.customer-tab ::v-deep .el-form--inline .el-form-item {
  margin-bottom: 10px;
}
.customer-tags ::v-deep .customer-label {
  margin:0 12px;
}
.record-tabs ::v-deep .el-input__suffix {
  right:14px;
}
.record-tabs ::v-deep .el-input__prefix {
  left:14px;
}
.record-timer ::v-deep .el-input__inner{
  border: none;
  border-radius: 1.4688rem
}
.record-timer ::v-deep .el-input--suffix .el-input__inner {
  padding-left: 39px;
}
.record-timer ::v-deep .el-input__suffix{
  display: flex;
    align-items: center;
}
.record-timer ::v-deep .el-input__prefix{
    display: flex;
    align-items: center;
    margin-right: .4375rem;
  }
.record-timer  {
  .el-input{
    display: flex;
    align-items: center;
  }
  width:100%;
}
.record-search {
  padding:10px 14px;
  font-size: 14px;
  line-height: 14px;
  color: #FFFFFF;
  height: auto;
}
.record-from {
  text-align: left;
  display: flex;
  flex-wrap: nowrap;
  padding:0 0px;
}
.client-input  ::v-deep .el-textarea__inner{
  background-color: #F5F5F5 ;
  border:none;
  color: #999999;
}
.other-member{
  text-align: left;
  margin: 0.75rem;
}
.other-member-box{
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 0.3125rem;
  padding: 0.4375rem 1.0625rem 0.4375rem 0.75rem;
  margin:0.3125rem 0.9375rem;
  .other-member-right{
    margin-left:0.4688rem
  }
  img{
    margin: 0;
    width:2.75rem;
    height: 2.75rem;
    border-radius: 0.3125rem;
  }
  .text-left{
    text-align: left;
    font-weight: 500;
  }
}
.group-box {
  padding: 0.625rem;

  .mt10 {
    margin-top: 0.625rem;
  }

  .into {
    background: var(--themeBaseColor);
    color: #fff;
    border-radius: 0.3125rem;
    padding: 0.3125rem 0.625rem;
    font-size: 0.75rem;
  }

  .flex-column {
    display: flex;
    flex-direction: column;
  }

  .flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .group-box-item {
    background: #fff;
    border-radius: 0.3125rem;
    padding: 0.875rem 1.0625rem 0.4375rem 0.75rem;
    margin-bottom: 0.25rem;
  }
}

// #customer .chown .waive {
//   color: #de5a55 !important;
//   border: 1px solid #de5a55 !important;
// }

#customer .chown .buttons {
  // width: 3.4375rem;
  height: 28px;
  // border-radius: 0.25rem;
}

#customer .chown .mr8 {
  margin-right: 0.5rem;
}

#customer .chown {
  background: #fff;
  height: 3.1875rem;
  line-height: 3.1875rem;
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  margin: 10px 0px;
  border-radius: 8px 8px 8px 8px;
}
#customer .chown .their {
  font-weight: 500;
  font-size: .875rem;
  color: #00001C;
}
#customer .chown .their span {
  padding:0 10px 0 0;
}

.line {
  width: 100%;
  height: 1px;
  background: #bbb;
}

#customer .search-btn {
  font-weight: 600;
  font-size: .9375rem;
  color: #00001C;
  margin-left: .75rem;
  margin-right: .75rem;
}

.children-main::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

#appMain.pcStyle .accessory-popup {
  width: 16.5625rem !important;
  left: 50%;
  border-radius: 0.3125rem;
}

#appMain.pcStyle .accessory-down {
  bottom: 15.125rem;
}

// .customer-tab ::v-deep .van-tab--active .van-tab__text {
//   font-size: 0.875rem;
//   font-weight: bold;
// }

// .customer-tab ::v-deep .record .van-tab__text {
//   font-size: 0.75rem;
//   line-height: 0.75rem;
// }

// .customer-tab ::v-deep .record .van-tabs {
//   padding-bottom: 0.5rem;
// }

.client-details ::v-deep .van-cell__title {
  text-align: left;
  font-size: 0.875rem;
  line-height: 0.875rem;
  color: #333;
}

.client-details ::v-deep .van-cell::after {
  border-bottom: none;
}

.client-details ::v-deep .van-picker__cancel {
  color: #aaaab3;
  font-size: 0.75rem;
  line-height: 0.75rem;
}

#customer ::v-deep .van-picker__title {
  line-height: 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: #3b3b4a;
}

.customer-tab .business-box {
  display: flex;
  padding: 0.5rem 0;
}

.customer-tab .business-box2 {
  display: flex;
  padding: 0.5rem 0;
  align-items: center;
}
.customer-tab .business-box2 input:first-child{
  margin-right: .3125rem;
}
.customer-tab .business-box2 input {
  width: 8.625rem;
    height: 2.25rem;
  padding: 0.375rem 0.9375rem;
  border: none;
  border-radius: 1.4688rem;
  background: #fff;
  box-sizing: border-box;
}

.customer-tab .business-box2 .search-button {
  width: 3.9375rem;
  height: 2.25rem;
  border: none;
  color: #fff;
  background-color: var(--themeBaseColor);
  border-radius: 1.5625rem;
  margin-left: .4375rem;
}

.details ::v-deep .van-cell {
  padding: 0 0.5rem  0  0;
}

.details ::v-deep .van-field__body {
  border: 1px solid #bdbdbd;
  border-radius: 4px;
  padding: 6px 8px;
}

.details ::v-deep .van-field__label {
  width: unset;
}

.item-box .close {
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 0 0 0 12px;
}

.item-box .close ::v-deep .van-icon {
  position: absolute;
  top: -2px;
  right: -2px;
  color: #fff;
  font-size: 16px;
  transform: scale(0.5);
}

.customer-tab .details {
  position: relative;
  background: #fff;
  padding: 0  0.75rem 1rem .625rem;
  margin: .625rem .75rem;
  border-radius: .5rem;
  // z-index: 10;
  
  .details-top{
    display: flex;
    align-items: self-end;
    padding-top: 1.1563rem;
    padding-bottom: 1.3125rem;
    padding-left: .125rem;
  }

  .file-list {
    display: flex;
    flex-wrap: wrap;
  }
  .area-accept {
    font-size: 13px;
    color: #999999;
    span {
      font-size: 14px;
      color: var(--themeBaseColor);
    }
    
  }

  .item-box {
    position: relative;
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 0.25rem;
    margin-right: 0.625rem;
  }

  .details-files-box {
    text-align: left;
    .details-files-box-item:last-child{
      margin-bottom: 0;
    }
    .details-files-box-item{
      margin-bottom: 1.25rem;
      display: flex; align-items: center; justify-content: space-between;
    }
    img{
      width: 2.5625rem;
      margin-right: .5313rem;
    }
    .details-files-box-btn{
      width: 3.25rem;
      height: 1.75rem;
      background: #FFFFFF;
      border-radius: .875rem;
      text-align: center;
      line-height: 1.75rem;
      border: .0313rem solid #AAAAB3;
    }

    .file-name::-webkit-scrollbar {
      display: none;
    }
  }
}

.customer-tab .add-business {
  margin: 0 .75rem .625rem;
  border-radius: 0.5rem;
  background-color: #fff;
  padding: 1rem 0.5625rem;
  text-align: left;
  .business-details{
    display: flex;
    margin-top: 1.25rem;
    align-items: flex-start;
  }
  textarea{
    border:none;
    flex:1;
  }
  .left-span{
    font-weight: 500;
    font-size: .875rem;
    color:#00001C;
  }
  div.center{
    border-bottom: 1px solid #F0F0F1;
    padding-bottom: 1.0938rem;
  }

  .relative {
    position: relative;
  }

  i {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
  }

  .center {
    align-items: center;
  }

  .mr-24 {
    margin-right: 0.75rem;
  }

  input {
    border: 1px solid #bbb;
    border-radius: 0.3125rem;
    height: 2rem;
    padding-left: 0.6875rem;
    border:none;
  }
}

.customer-tab .business-box  .span {
  position: relative;
  text-align: left;
  color: #686868;
  border: none;
  background: #fff;
  height: 2.25rem;
  flex:1;
  border-radius: 1.4688rem;
  margin-right: 0.3125rem;
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding-left: 1.0625rem;
  box-sizing: border-box;
}

.customer-tab .business-box .van-icon {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
}

.customer-tab .business-box3 {
  display: flex;
  flex-direction: column;
}

.customer-tab .business-box3 .business-item {
  margin-top: 0.75rem;
  border-radius: 0.5rem;
  border:1px solid #fff;
  background: linear-gradient( 180deg, #E8F1FF 0%, #FFFFFF 100%);
  font-size: 0.875rem;
  padding:.625rem
}

/* .customer-tab .business-box3 .business-item  */
.area-footer ::v-deep .el-upload {
  display: block;
}

.area-footer ::v-deep .el-upload-list {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.client-details .van-field {
  padding: 0.625rem 1.25rem 0.625rem 0;
}

.department-main .content-time:last-child .time-left .time-icon {
  border: 0.0625rem solid var(--themeBaseColor);
  background-color: transparent;
}

.department-main .content-time:last-child::after {
  width: 0;
  height: 0;
}

.van-cascader ::v-deep .van-cascader__title {
  width: 100%;
}

#customer {
  position: relative;
}
</style>
<style lang="scss" scoped>
.step-round{
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background-color: #D6D6DC;
}
.is-finish .step-round,
.is-process .step-round {
  background-color: var(--themeBaseColor) !important;
}
::v-deep .is-wait .el-step__icon.is-text{
  border-color:#D6D6DC;
}
::v-deep .el-step__title.is-process{
  color: var(--themeBaseColor);
}
::v-deep .el-step__title.is-finish{
  color: var(--themeBaseColor);

}
::v-deep .el-step__line{
    background-color: #D6D6DC;
}
::v-deep .el-step__title.is-wait{
  color: #6E6E79;
}
::v-deep  .el-step__icon.is-text {
  border-color:var(--themeBaseColor);
}
::v-deep .is-process .el-step__icon.is-text {
  border-color:var(--themeBaseColor);
}

::v-deep .is-finish .el-step__line{
  background-color: var(--themeBaseColor);

}
::v-deep .is-process .el-step__icon{
  background-color: var(--themeBaseColor);

}
::v-deep .el-step__icon{
  width: .625rem;
  height: .625rem;
  border-radius: 50%;

}
.customer-info {
  color: #fff;
  padding: 20px 12px 0 12px;
  background:  linear-gradient( 180deg, #A9D2FF 0%, #E8F7FF 52%, #F5F5F5 100%);

  .customer-user-box {
    // padding: 1rem 0.9375rem 0 0.9375rem;

    .customer-user {
      position: relative;

      .customer-user-img {
        width: 63px;
        height: 63px;
        border: 1px solid #FFFFFF;
        border-radius: 50%;
        overflow: hidden;
        // background-color: #000;
        box-sizing: border-box;

        img {
          width: 63px;
          height: auto;
          border-radius: 50%;
        }
      }

      .customer-user-right {
        margin-left: 10px;

        .user-right-id {
          background-color: #fff;
            padding: .25rem .5625rem;
            text-align: center;
            font-weight: 500;
            font-size: .75rem;
            color: #3B3B4A;
            margin-left: .25rem;
            border-radius: .625rem;
            line-height: 1;
            box-sizing: border-box;
        }

        .user-level-name {
          position: relative;
          display: flex;
          align-items: center;
          background: linear-gradient( 90deg, #FFDC97 0%, #FFEABB 100%);
          border-radius: .625rem;
          border: 1px solid #FFFFFF;
          padding:.2813rem .5313rem;
          font-weight: 500;
          font-size:.6875rem;
          line-height: 1;
          color: #7B400B;
          box-sizing: border-box;
        }

        .customer-user-phone {
          margin: 0.75rem 0 0.9375rem 0;

          .icon-zx_map_tel {
            padding: 0 0 0 0.375rem;
            font-size: 0.625rem;
            line-height: 0.625rem;
          }

          p {
            font-size: 0.6875rem;
            line-height: 0.6875rem;
            color: #e8e8e8;

            span {
              color: #f34f47;
            }
          }
        }
      }

      .realse-name {
        .user-right-name {
          font-weight: bold;
          font-size: 1.125rem;
          color: #00001C;
          line-height: 1.4375rem;
          text-align: left;
          padding:0 0 8px 0;
        }
      }

      // &::before {
      //   content: " ";
      //   position: absolute;
      //   left: 0;
      //   bottom: 0;
      //   width: 100%;
      //   height: 0.0625rem;
      //   border-bottom: 0.0625rem solid #6f6f6f;
      //   -webkit-transform-origin: 0 0;
      //   transform-origin: 0 0;
      //   -webkit-transform: scaleY(0.5);
      //   transform: scaleY(0.5);
      // }
    }
    .customer-phone {
      background: #FFFFFF;
      border-radius: 10px 10px 10px 10px;
      margin:20px 0 10px 0;
      padding: 8px 10px 8px 8px;
      .wrap {
        .icon-service_m_box{
          width: 1.75rem;
          height: 1.75rem;
          background: #F0F0F1;
          border-radius: 1rem;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .icon-service_m {
          font-size: 14px;
          color:#6E6E79;
        }
        h5 {
          font-weight: 500;
          font-size: 15px;
          color: #00001C;
          padding:0 10px 0 5px;
        }
        .copy {
          font-size: 11px;
          line-height: 11px;
          color: #3B3B4A;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #AAAAB3;
          padding:3px 4px;
          cursor: pointer;
        }
      }
      .phone-btn {
        display: inline-block;
        width: 4.6875rem;
        height: 1.75rem;
        font-weight: 500;
        font-size: 13px;
        color: var(--themeBaseColor);
        text-align: center;
        line-height: 1.75rem;
        border-radius: 1.25rem;
        border: 1px solid var(--themeBaseColor);
      }
    }

   
  }
}

.customer-tab .client-area {
  margin:0 0px 10px 0px;
  background: #FFFFFF;
  border-radius: 8px 8px 8px 8px;
  background-color: #fff;
  padding: 0.9375rem 0.9375rem 0.75rem 0.9375rem;
}
.customer-tab {
  margin:0 12px;
  padding-bottom:12px;
  .area-head {
    padding:0 0 16px 0;
  }
} 


.client-add {
  font-size: 14px;
  line-height: 14px;
  // background: #015EF5;
  border-radius: 25px 25px 25px 25px;
  color: #fff;
  cursor: pointer;
  padding:6px 16px;
  height: auto;
}

.area-footer {
  margin-top: 0.5rem;

  .area-left {
    text-align: left;
    span {
      font-size: 0.6875rem;
      color: #666;
      line-height: 0.6875rem;
      margin-left: 0.4375rem;
    }
  }

  .area-right {
    min-width: 42px;
  }
}

.record {
  // background-color: #fff;

  .record-tabs {
    border-bottom: 0.0625rem solid #f2f2f2;
  }
}
.label-popup {
  padding:20px 16px;
  .popup-head {
    // padding:0 0 10px 0;
    h3 {
      font-weight: bold;
      font-size: 15px;
      color: #00001C;
    }
    .label-circle {
      background: #F0F0F1;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      .icon-guanbi {
        font-size: 10px;
      }
    }
    
  }
}


.accessory {
  width: 16.5625rem;
  height: 16.5625rem;
  background: #fff;
  position: relative;
  border-radius: 0.125rem;
  // background-size: cover;
  background-size: 100% 100%;

  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}

.accessory-down {
  position: fixed;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5002;

  img {
    width: 1.8125rem;
    height: 1.8125rem;
  }
}

.client-details {
  .client-name {
    background-color: #fff;

    .icon-fontclass-xinghao {
      font-size: 0.5rem;
      padding: 0 0.25rem 0 0;
      color: var(--themeBaseColor);
    }

    span {
      width: 5.625rem;
      min-width: 5.625rem;
      padding: 0 0 0 1rem;
    }
  }

  .client-btn {
    margin: 1.25rem;
    padding: 0.5625rem 1.75rem;
    font-size: 0.6875rem;
    border-radius: 6px;
    color: #fff;
    background-color: var(--themeBaseColor);
  }
}

.department-main {
  padding: 1.3125rem 0.75rem 0 0.9375rem;

  .head {
    margin-bottom: 1.375rem;

    .cancel {
      font-size: 0.75rem;
      line-height: 0.75rem;
      color: #aaaab3;
    }

    .department-title {
      font-size: 1rem;
      line-height: 1rem;
      font-weight: 500;
      color: #3b3b4a;
    }

    .affirm {
      font-size: 0.75rem;
      line-height: 0.75rem;
    }
  }

  .content-time-stair {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  .time-stair {
    width: 100%;
    padding: 0 0 1.75rem 0;
    position: relative;
  }

  .content-time,
  .time-stair {
    width: 100%;
    padding: 0 0 1.75rem 0;
    position: relative;

    &::after {
      content: "";
      width: 0.0625rem;
      height: 100%;
      position: absolute;
      top: 0.375rem;
      left: 3.5008px;
      background-color: #f14e4e;
    }

    .time-left {
      .time-icon {
        width: 0.4375rem;
        height: 0.4375rem;
        background: var(--themeBaseColor);
        border-radius: 50%;
        margin-right: 0.625rem;
      }

      p {
        font-size: 0.75rem;
        line-height: 0.75rem;
      }
    }
  }

  .select {
    .time-left {
      color: var(--themeBaseColor);
    }
  }

  .department-children {
    border-top: 0.0625rem solid #f0f0f1;

    .department-title {
      font-size: 0.9375rem;
      line-height: 0.9375rem;
      color: #3b3b4a;
      margin: 0.9375rem 0 1.25rem 0.25rem;
      text-align: left;
    }

    .children-main {
      height: 12.5rem;
      overflow-y: scroll;

      .children-item {
        font-size: 0.75rem;
        line-height: 0.75rem;
        margin-bottom: 1.4375rem;
      }

      .on {
        color: #f14e4e;
      }
    }
  }
}

.header-cascader {
  width: 100%;
  font-size: 0.875rem;
}
</style>
